<template>
	<view class="page-view">
		<cu-custom ref="cuCustom" :isBack="true">
			<template slot="backText">
				返回
			</template>
		</cu-custom>
		<view class="group">
			<view class="row">
				<view class="name">您的管综成绩是</view>
				<input type="number" placeholder="请输入成绩···" v-model="gzScore" @change="e => changeScore(e, 200)" />
			</view>
			<view class="row">
				<view class="name">您的英语成绩是</view>
				<input type="number" placeholder="请输入成绩···" v-model="enScore" @change="e => changeScore(e, 100)" />
			</view>
			<view class="row">
				<view class="name">您报名的区域是</view>
				<view class="select">
					<picker mode="selector" :value="formInfo.area" @change="selectArea" :range="areaList" range-key="text">
						<view class="uni-input">{{ areaList[formInfo.area].text || '请选择区域' }}</view>
					</picker>
					<text class="cuIcon-right arrow"></text>
				</view>
			</view>
			<view class="row">
				<view class="name">您报名的学校是</view>
				<view class="select">
					<picker mode="selector" :value="formInfo.school" @change="selectSchool" :range="schoolList" range-key="text">
						<view class="uni-input">{{ schoolList[formInfo.school].text || '请选择院校' }}</view>
					</picker>
					<text class="cuIcon-right arrow"></text>
				</view>
			</view>
			<view class="row">
				<view class="name">您报考的专业是</view>
				<view class="select">
					<picker mode="selector" :value="formInfo.major" @change="selectMajor" :range="majorList" range-key="text">
						<view class="uni-input">{{ majorList[formInfo.major].text || '请选择报考专业' }}</view>
					</picker>
					<text class="cuIcon-right arrow"></text>
				</view>
			</view>
			<view class="row" v-if="hasApproval">
				<view class="name">是否参加提前面试</view>
				<radio-group class="block" @change="RadioChange">
					<view class="flex align-center">
						<view class="flex align-center flex-sub">
							<view class="title margin-right-sm">是</view>
							<radio style="transform: scale(.7);" :class="formInfo.approval == 1 ? 'checked' : ''" :checked="formInfo.approval == 1" :value="1"></radio>
						</view>
						<view class="flex align-center flex-sub">
							<view class="title margin-right-sm">否</view>
							<radio style="transform: scale(.7);" :class="!formInfo.approval == 0 ? 'checked' : ''" :checked="formInfo.approval == 0" :value="0"></radio>
						</view>
					</view>
				</radio-group>
			</view>
			<view class="defaultBtn" @tap="submit">查看学校上岸概率</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	name: 'probability',
	data() {
		return {
			enScore: undefined,
			gzScore: undefined,
			formInfo: {
				area: '',
				school: '',
				major: '',
				approval: 0
			},
			areaList: [],
			schoolList: [],
			majorList: [],
			hasApproval: false
		};
	},

	created() {
		this.getAreasOrMajor('area');
		// this.getAreasOrMajor('major');
	},
	computed: {
		...mapState(['openid'])
	},
	onLoad(options) {
		if (options.enScore) {
			this.enScore = options.enScore;
		}
		if (options.gzScore) {
			this.gzScore = options.gzScore;
		}
	},
	methods: {
		changeScore(val, scores) {
			if (parseInt(val.detail.value) > scores) {
				if (scores == 200) {
					this.gzScore = '';
				} else {
					this.enScore = '';
				}

				uni.showToast({
					title: '请输入正确的估分',
					icon: 'none'
				});
			}
		},
		selectArea(e) {
			this.formInfo.area = e.target.value;
			this.formInfo.school = undefined;
			this.formInfo.major = undefined;
			this.hasApproval = false;
			this.getSchool(this.areaList[e.target.value].value);
		},
		//选择院校
		selectSchool(e) {
			this.formInfo.school = e.target.value;
			this.formInfo.major = undefined;
			this.hasApproval = false;
			this.getMajorsBySchool(this.schoolList[this.formInfo.school].value);
			// this.getApprovalInfo();
		},
		//选择专业
		selectMajor(e) {
			this.formInfo.major = e.target.value;
			this.getApprovalInfo();
		},
		//选择批次
		selectBatch(e) {
			this.formInfo.batch = e.target.value;
		},
		getAreasOrMajor(optiontype) {
			this.$getajax(this.$api.getAreasOrMajor, {
				optiontype
			}).then(da => {
				let list = [];
				if (da.code == 200 && da.data && da.data.length > 0) {
					list = da.data.map(item => {
						return {
							value: item.code,
							text: item.name,
							isInterview: false
						};
					});
				}
				if (optiontype == 'area') {
					this.areaList = list;
				} else {
					this.majorList = list;
				}
			});
		},
		getSchool(areaKey) {
			this.$getajax(this.$api.getSchool, {
				areaKey
			}).then(da => {
				let list = [];
				if (da.code == 200 && da.data && da.data.length > 0) {
					list = da.data.map(item => {
						return {
							value: item.schoolCode,
							text: item.schoolName
						};
					});
				}
				this.schoolList = list;
			});
		},
		logAssessment() {
			this.$getajax(this.$api.logAssessment, {
				enscore: this.enScore,
				gzscore: this.gzScore,
				openid: this.openid
			}).then(da => {
				if (da.code == 200) {
				}
			});
		},
		submit() {
			/* 先判断是否可以保存过估分 */
			if (this.enScore != undefined && this.enScore != '' && (this.gzScore != undefined && this.gzScore != '')) {
				if (this.enScore > 100 || this.gzScore > 200) {
					if (this.gzScore > 200) {
						this.gzScore = '';
					} else if (this.enScore > 100) {
						this.enScore = '';
					}
					uni.showToast({
						title: '请输入正确的估分',
						icon: 'none'
					});
				} else {
					if (this.formInfo.area != '' && this.formInfo.school != '' && this.formInfo.major != '') {
						let area = this.areaList[this.formInfo.area].value;
						let school = this.schoolList[this.formInfo.school].value;
						let major = this.majorList[this.formInfo.major].value;
						let approval = this.formInfo.approval;
						let { enScore, gzScore } = this;
						uni.navigateTo({
							url: `/pages/scoreAndRank/scoreAndRank?area=${area}&school=${school}&major=${major}&approval=${approval}&enscore=${enScore}&gzscore=${gzScore}`
						});
					} else {
						uni.showToast({
							title: '请选择报考院校和专业',
							icon: 'none'
						});
					}
				}
			} else {
				uni.showToast({
					title: '请输入估分',
					icon: 'none'
				});
			}
		},
		RadioChange(e) {
			this.formInfo.approval = e.detail.value;
		},
		/* 查询是否有提前批 */
		getApprovalInfo() {
			if (this.schoolList[this.formInfo.school].value && this.formInfo.major && this.majorList[this.formInfo.major].value) {
				this.$postajax(this.$api.getApprovalInfo, {
					majorCode: this.majorList[this.formInfo.major].value,
					schoolCode: this.schoolList[this.formInfo.school].value
				})
					.then(da => {
						this.hasApproval = da.data == 'approval_both';
					})
					.catch(() => {
						this.hasApproval = false;
					});
			} else {
				this.hasApproval = false;
			}
		},
		getMajorsBySchool(schoolCode) {
			this.$getajax(this.$api.getMajorsBySchool, {
				schoolCode
			}).then(da => {
				let list = [];
				if (da.code == 200 && da.data && da.data.length > 0) {
					list = da.data.map(item => {
						return {
							value: item.majorCode,
							text: item.majorName,
							isInterview: false
						};
					});
				}
				this.majorList = list;
			});
		}
	},
	onShareAppMessage(res) {
		var url = '/pages/index/index';
		return {
			title: '果芽MBA MEM MPA 联考估分',
			path: url,
			imageUrl: 'https://apps.guoyamba.com/share01.png'
		};
	}
};
</script>

<style lang="scss">
.page-view {
	height: 100%;
	position: relative;
	background: #fff;
	padding-bottom: 20rpx;
	overflow: auto;
}
.group {
	margin: 0 68rpx;
	padding-top: 20rpx;
	.row {
		font-size: 32upx;
		.name {
			line-height: 100rpx;
			margin-right: 20upx;
			font-weight: 500;
		}
	}

	.row + .row {
		margin-top: 20upx;
	}

	input,
	picker {
		color: #999999;
		height: 66rpx;
		background: #ffffff;
		font-size: 24rpx;
		border-bottom: 2rpx solid #d3d3d3;
	}

	.select {
		position: relative;
		input,
		.uni-input {
			color: #333333;
		}
		.uni-input {
			height: 66rpx;
			line-height: 66rpx;
		}
		.arrow {
			position: absolute;
			top: 50%;
			right: 5rpx;
			transform: translateY(-50%);
			color: #a0a0a0;
		}
	}
}
.estimate-result {
	margin: 20rpx 40rpx 0;
	.title {
		font-size: 32upx;
		font-weight: 500;
	}
	.result-con {
		margin: 20rpx 0 60rpx;

		.tip {
			text-align: left;
		}
		.icon {
			width: 100rpx;
			display: block;
			margin: 0 auto;
			margin-bottom: 10rpx;
		}
		.warn {
			margin-top: 20rpx;
			background: #f2f2f2;
			padding: 10rpx 20rpx;
			line-height: 40rpx;
		}
	}
}
.tablebox {
	padding: 30upx 0;
	color: #434040;
	font-size: 26upx;

	.table {
		border: 1px solid #dbdbdb;
		text-align: center;

		.table-hd,
		.table-bd .table-td,
		.table-ft {
			align-items: stretch;

			span {
				width: 93upx;
				padding: 25upx 0;

				&:first-child {
					width: 130upx;
				}

				& + span {
					border-left: 1px solid #dbdbdb;
				}
			}
		}

		.table-hd {
			border-bottom: 1px solid #dbdbdb;
			height: 75upx;
			background: #db6553;
			color: #ffffff;
			font-size: 28upx;
			font-weight: bold;
		}

		.table-bd .table-td {
			color: #6c6c6c;
			font-size: 25upx;

			& + .table-td {
				border-top: 1px solid #dbdbdb;
			}

			&:nth-child(even) {
				background: #f9f9f9;
			}
		}

		.table-bd {
			// border-bottom: 1px solid #dbdbdb;
		}

		.table-ft {
			color: #fd3c3e;
			font-size: 26upx;

			height: 74upx;

			.text-right {
				color: #2e2e2e;
				font-size: 28upx;
				font-weight: bold;
				padding-right: 54upx;
				color: #2e2e2e;
			}
		}
	}
}
.scan {
	margin: 40rpx 0;
	text-align: left;
	position: relative;
	.code {
		width: 260rpx;
		height: 260rpx;
		display: block;
		// position: absolute;
		// top: 50%;
		// transform: translateY(-50%);
	}
	.des {
		// margin-left: 280rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		.tip {
			margin-bottom: 10rpx;
		}
	}
}
.defaultBtn {
	width: 516rpx;
	margin: 100rpx auto 0;
}
</style>
